<link rel="stylesheet" type="text/css" href="<?php echo css_url().'general_form.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'960grid/960.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'960grid/960_extra.css'?>">
<div class="container_12 head" >
    <div class="grid_4" style="font-size:1.5em">Hobbies</div>
    <div class="grid_2"><div id="add-hobby" class="dynamic-btn">+</div></div>
</div>

<?php 
    $Hobbies = explode('##',$UserInfo['Hobbies']);
?>

<form id="hobbies-form" method="POST" action="<?php echo site_url().'/user_group3/account/edit_user_hobbies'?>">
<div id="hobbies-edit-area">
    <?php $i = 1;  foreach($Hobbies as $Hobby){?>
        <div class="container_12 margin-bottom">
            <div class="grid_1">
                &nbsp;
            </div>
            <div class="grid_3">
                <input class="text" type="text" name="hobbies[]" value="<?php echo $Hobby; ?>"/>
            </div>
            
            <div class="grid_2">
                <div class="dynamic-btn" button="delete">-</div>
            </div>
        </div>
    <?php }  ?>
</div>
</form>

<div class="container_12 margin-bottom">
    <div class="grid_1">
        &nbsp;
    </div>
    
    <div class="grid_2">
        <div id="save-hobbies" class="static-btn">Save</div>
    </div>
</div>

<script>
    var add_button_handler = function(){ $('#add-hobby').on('click',function(){
        HTMLContent = '<div class="container_12 margin-bottom">'
            +'<div class="grid_1">'
                +'&nbsp;'
            +'</div>'
            +'<div class="grid_3">'
                +'<input class="text" type="text" name="hobbies[]" placeholder="Enter Hobby"/>'
            +'</div>'
            +'<div class="grid_2">'
                +'<div class="dynamic-btn" button="delete">-</div>'
            +'</div>'
            +'</div>'
        $('#hobbies-edit-area').append(HTMLContent);
        delete_buttons_handler();
    });}
    
    var delete_buttons_handler = function(){
        $('div[button="delete"]').on('click',function(){
            $(this).parent().parent().remove();
        });
    }
    
    var submit_handler = function(){
        $('#save-hobbies').on('click',function(){
            $("#hobbies-form").submit();
        });
    }
    
    var buttons_handler = function(){
        add_button_handler();
        delete_buttons_handler();
        submit_handler();
    }
    buttons_handler();
</script>